<!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="utf-8">
            <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
            <title>Tiled Chart</title>

            <!-- Leaflet -->
            <link rel="stylesheet" href="leaflet.css" />
            <script src="leaflet.js"></script>

            <style>
                body { margin:0; padding:0; }
                body, table, tr, td, th, div, h1, h2, input { font-family: "Calibri", "Trebuchet MS", "Ubuntu", Serif; font-size: 11pt; }
                #map { position:absolute; top:0; bottom:0; width:100%; } /* full size */
                .ctl { 
                    padding: 2px 10px 2px 10px;
                    background: white;
                    background: rgba(255,255,255,0.9);
                    box-shadow: 0 0 15px rgba(0,0,0,0.2);
                    border-radius: 5px;
                    text-align: right;
                }
                .title {
                    font-size: 18pt;
                    font-weight: bold;
                }
                .src {
                    font-size: 10pt;
                }

            </style>

            </head>
            <body>
            <div id="map"></div>

                <script>
                /* **** Leaflet **** */

                // Base layers
                //  .. OpenStreetMap
                var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
                
                //  .. Stamen Terrain
                var terrain = L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://stamen.com">Stamen</a> contributors'});
                
                //  .. Open CycleMap
                var cycle = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://thunderforest.com/terms/">Thunder Forest</a>'});
                
                //  .. Landscape
                var landscape = L.tileLayer('https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://thunderforest.com/terms/">Thunder Forest</a>'});
                
                //  .. White background
                var white = L.tileLayer("");

                // Local TMS tile layer
                var localTiles = L.tileLayer('./{z}/{x}/{y}.png', {tms: true, opacity: 0.7, attribution: ""});

                // NEXRAD weather radar
                var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
                    layers: 'nexrad-n0r-900913',
                    format: 'image/png',
                    transparent: true,
                    attribution: "Weather data © 2012 IEM Nexrad"
                });
                
                // Map
                var map = L.map('map', {
                    center: [44.966667,-103.766667],
                    zoom: 4,
                    minZoom: 3,
                    maxZoom: 16,
                    noWrap: true,
                    detectRetina: true,
                    reuseTiles: true,
                    layers: [osm, localTiles]
                });
                //   
                var basemaps = {"OpenStreetMap": osm, "Open Cycle Map": cycle, "Landscape": landscape, "Stamen Terrain": terrain, "Without background": white}
                
                var overlaymaps = {"Chart": localTiles, "Nexrad": nexrad}

                // Title
                var title = L.control();
                title.onAdd = function(map) {
                        this._div = L.DomUtil.create('div', 'ctl title');
                        this.update();
                        return this._div;
                };
                title.update = function(props) {
                        this._div.innerHTML = "Merged Chart";
                };
                title.addTo(map);

                // Add base layers
                L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);

                L.control.scale().addTo(map);
                </script>

            </body>
        </html>

        
